<template>
	<view class="container">
		<view class="tui-bg-box">
			<image src="/static/images/bg_login.png" class="tui-bg-img"></image>
			<image src="/static/images/mine_def_touxiang_3x.png" class="tui-photo"></image>
			<view class="tui-login-name">欢迎登陆！</view>
		</view>
		<form :report-submit="true" @submit="formLogin">
			<view class="tui-login-from">
				<view class="tui-line-cell">
					<tui-icon name="people" :size="20" color="#6d7a87"></tui-icon>
					<input placeholder-class="tui-phcolor" class="tui-input" name="username" placeholder="请输入账号" maxlength="11"
					 v-model="formData.username" type="text" />
				</view>
				<view class="tui-line-cell tui-top28">
					<tui-icon name="pwd" :size="20" color="#6d7a87"></tui-icon>
					<input placeholder-class="tui-phcolor" class="tui-input" type="password" name="password" placeholder="请输入密码"
					 maxlength="11" v-model="formData.password" />
				</view>
				<!-- <view class="tui-line-cell tui-top28">
					<tui-icon name="pwd" :size="20" color="#6d7a87"></tui-icon>
					<input placeholder-class="tui-phcolor" class="tui-input" name="smsCode" placeholder="请输入验证码" maxlength="6" />
					<tui-button class="sendCode" width="182rpx" height="56rpx" :size="24" :type="type" shape="circle" :plain="true" :disabled="disabled" @click="btnSend">{{ btnText }}</tui-button>
				</view> -->
				<button class="tui-button-primary tui-btn-submit" hover-class="tui-button-hover" form-type="submit">登录</button>
				<view class="tui-protocol" hover-class="opcity" :hover-stay-time="150">
					点击"登录"即表示已同意
					<text class="tui-protocol-red" @tap="protocol">《用户协议》</text>
				</view>
				<view class="tips" @click="handleClick">
					还没注册？去注册
				</view>
			</view>
		</form>
			<!-- <drag-verify-img-chip ref="dragVerify" :imgsrc="img" :isPassing.sync="isPassing" :showRefresh="true" :barWidth="40"
			 text="请按住滑块拖动" successText="验证成功" handlerIcon="iconfont iconchangyongicon-" successIcon="iconfont icontijiao"
			 refreshIcon="iconfont iconshuaxin" @refresh="handleRefresh" @passcallback="handlePass">
			</drag-verify-img-chip> -->
			<!-- <V5Dialog ref="v5dialog" host="free7jysj6c2.verify5.com" token="0cceb5b0347941619979535cd2650282" /> -->
			<V5Dialog lang="zh-CN" :mournful="false" ref="v5dialog" :trustLevel="5" host="free7jysj6c2.verify5.com" token="0cceb5b0347941619979535cd2650282"/>
		<tui-tips position="center" ref="toast"></tui-tips>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import {
		login
	} from '@/http/api.js'
	const util = require('@/util/util.js');
	const form = require('@/components/common/tui-validation/tui-validation.js');
	// import dragVerifyImgChip from "vue-drag-verify-img-chip/dist/index.js";
	// import dragVerifyImgChip from "@/components/vue-drag-verify-img-chip/dragVerifyImgChip.vue";
	import V5Dialog from 'components/verify5-ui/V5Dialog'
	export default {
		components: {
			V5Dialog,
		},
		data() {
			return {
				isVerify: false,
				showCode: true,
				img: 'https://picsum.photos/280/200',
				disabled: false,
				isPassing: false,
				btnText: '获取验证码',
				type: 'primary',
				formData: {}
			};
		},
		mounted() {
			
		},
		methods: {
			init() {
				let _this = this
				this.$refs.v5dialog.verify(function(result) {
					if (result.success) {
						var verifyId = result.verifyId;
						setTimeout(() => {
							_this.isVerify = true
						}, 500)
					}
				});
			},
			...mapMutations(['login']),
			getRandom: function(u) {
				let rnd = '';
				u = u || 6;
				for (var i = 0; i < u; i++) {
					rnd += Math.floor(Math.random() * 10);
				}
				return rnd;
			},
			doLoop: function(seconds) {
				let code = this.getRandom(6);
				this.tui.toast('您本次的验证码是：' + code, 5000);
				seconds = seconds ? seconds : 60;
				this.btnText = seconds + 's后获取';
				this.code = code;
				let countdown = setInterval(() => {
					if (seconds > 0) {
						this.btnText = seconds + 's后获取';
						--seconds;
					} else {
						this.btnText = '获取验证码';
						this.disabled = false;
						this.type = 'primary';
						clearInterval(countdown);
					}
				}, 1000);
			},
			btnSend: function() {
				let rules = [{
					name: 'mobile',
					rule: ['required'],
					msg: ['请输入您的账号']
				}];
				//进行表单检查
				let formData = {
					mobile: this.mobile
				};
				let checkRes = form.validation(formData, rules);
				if (!checkRes) {
					this.disabled = true;
					this.btnText = '请稍候...';
					this.type = 'gray';

					setTimeout(() => {
						this.doLoop(60);
					}, 500);
				} else {
					this.$refs.toast.showTips({
						type: "warning",
						msg: checkRes
					});
				}
			},
			formLogin: function(e) {
				// if (!this.isVerify) {
				// 	this.init()
				// 	return false
				// }
				let loginCode = e.detail.value.smsCode;
				let mobile = e.detail.value.mobile;
				let rules = [{
						name: 'username',
						rule: ['required'],
						msg: ['请输入您的账号']
					},
					{
						name: 'password',
						rule: ['required'],
						msg: ['请输入密码']
					}
				];
				//进行表单检查git 
				let checkRes = form.validation(this.formData, rules);
				if (checkRes) {
					this.$refs.toast.showTips({
						type: "warning",
						msg: checkRes
					});
					return;
				}
				login(this.formData).then(resp => {
					console.log(resp)
					if (resp.code === '10000') {
						let userInfo = this.formData
						uni.setStorageSync('isLogin', resp.data);
						uni.setStorageSync('userInfo', userInfo);
						this.$refs.toast.showTips({
							type: "green",
							msg: "登录成功~"
						});
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/center/index/index'
							});
						}, 200);
					}
				})
			},
			protocol: function() {
				uni.navigateTo({
					url: '/pages/doc/protocol/protocol'
				});
			},
			handleClick() {
				uni.navigateTo({
					url: "../reg/reg"
				})
			},
			handleRefresh() {
				console.log('resh')
				this.img = 'https://picsum.photos/280/200?random=' + Math.random();
			}
		}
	};
</script>

<style>
	page {
		background: #fff;
	}

	.tui-bg-box {
		width: 100%;
		box-sizing: border-box;
		position: relative;
		padding-top: 44rpx;
	}

	.tui-photo {
		height: 138rpx;
		width: 138rpx;
		display: block;
		margin: 10rpx auto 0 auto;
		border-radius: 50%;
		position: relative;
		z-index: 2;
	}

	.tui-login-name {
		width: auto;
		height: 40rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 36rpx auto 0 auto;
		text-align: center;
		position: relative;
		z-index: 2;
	}

	.tui-bg-img {
		width: 100%;
		height: 346rpx;
		display: block;
		position: absolute;
		top: 0;
	}

	.tui-login-from {
		width: 100%;
		padding: 128rpx 104rpx 0 104rpx;
		box-sizing: border-box;
	}

	.tui-input {
		font-size: 32rpx;
		flex: 1;
		display: inline-block;
		padding-left: 32rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-line-cell {
		padding: 27rpx 0;
		display: -webkit-flex;
		display: flex;
		-webkiit-align-items: center;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-line-cell::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #e0e0e0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tui-top28 {
		margin-top: 28rpx;
	}

	.tui-btn-class {
		width: 196rpx !important;
		height: 54rpx !important;
		border-radius: 27rpx !important;
		font-size: 28rpx !important;
		padding: 0 !important;
		line-height: 54rpx !important;
	}

	.tui-btn-submit {
		margin-top: 100rpx;
	}

	.tui-protocol {
		color: #333;
		font-size: 24rpx;
		text-align: center;
		width: 100%;
		margin-top: 29rpx;
	}

	.tui-protocol-red {
		color: #f54f46;
	}
</style>
<style scoped lang="scss">
	.tui-button-primary {
		background: linear-gradient(to right, #fd4452, #f7774a);
	}

	.sendCode {
		::v-deep {
			button {
				color: #f7774a !important;

				&::after {
					border-color: #f7774a !important;
				}
			}

		}
	}

	.tips {
		padding: 10rpx 0;
		font-size: 24rpx;
		text-align: center;
		color: #f7774a;
	}

	.tk-mask {
		position: fixed;
		left: 0;
		top: 1000%;
		bottom: 0;
		right: 0;
		background: rgba($color: #000000, $alpha: .5);
		z-index: -1;

		&.show {
			top: 0;
			z-index: 1;
		}
	}

	.codeImg {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
</style>
